import jQuery from 'jquery'
window.jquery = window.$ = jQuery
import 'popper.js'
import 'bootstrap'
import 'layui'

import http from 'axios'


Promise.all([http({
  url: 'https://gank.io/api/v2/categories/Girl'
}), http({
  url: 'https://gank.io/api/v2/categories/Article'
})]).then(res => {
  let menuData = []
  res.forEach((item) => {
    const { data } = item.data
    menuData = [...menuData, ...data]
  })
  menuData.forEach((item) => {
    const { title } = item
    // console.log(item)
    jQuery(`<li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">${title}</a>
        </li>`).appendTo('.my-menu')
  })
}).catch(e => {
  console.log(e)
})

let page = 1
let hasNext = true
let count = 10
// list html
load()
function load() {
  http({
    url: `https://gank.io/api/v2/data/category/Girl/type/Girl/page/${page}/count/${count}`
  }).then(res => {
    const {data} = res.data
    console.log(data)
    if (res.data.length < count) {
      hasNext = false
    }
    data.forEach((item) => {
      // console.log(item)
      const { images : img, desc, title, _id: id } = item
      jQuery(`<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
      <div class="card my-card">
        <img src="${img[0].startsWith('http') ? img : 'https://gank.io/images/2cd66ec93c774bb188430a436a12c1b1'}" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">${title}</h5>
          <p class="card-text my-text">${desc}</p>
          <a href="./article.html?id=${id}" class="btn btn-primary">查看详情</a>
        </div>
      </div>
    </div>`).appendTo('.my-list')
    })

  }).catch(e => {
    console.log(e)
  }).finally(() => {
    console.log('ok!')
  })
}


// 轮播图
http({
  method: 'GET',
  url: 'https://gank.io/api/v2/banners',
}).then((res) => {
  // success
  const { data } = res.data
  data.forEach(item => {
    // console.log(item)
    jQuery(`<div class="myList">
            <img src="${item.image}" alt="">
            <p class="decs">${item.title}</p>
          </div>`).appendTo('#my-banner')
  })
  layui.use('carousel', function(){
    let carousel = layui.carousel;
    //建造实例
    carousel.render({
      elem: '#test1'
      ,width: '100%' //设置容器宽度
      ,arrow: 'always' //始终显示箭头
      //,anim: 'updown' //切换动画方式
      ,autoplay : true
    });
  });
}).catch(e => {
  // error
  console.log(e)
}).finally(() => {
  console.log('已完成')
})


// 随机妹子
let img = $('.meizi img')
let btn = $('.meizi .my-meizi')

btn.on('click',() => {
  http({
    method:'GET',
    url:`https://gank.io/api/v2/random/category/Girl/type/Girl/count/20`,
  }).then(res => {
    const { data } = res.data
    let Random = parseInt(Math.random() * data.length)
    $(img).attr('src',data[Random].url)
    // $('.desc').html(data[Random].title)
  }).catch(e => {
    console.log(e)
  })
})
// 下一页
$('.next').on('click',function () {
  $('.my-list').html('')
  if (!hasNext) {
    alert('没有更多数据了')
  } else {
    page += 1
    load()
  }
})
// 上一页
$('.prev').on('click',function () {
  $('.my-list').html('')
  page -= 1
  load()
})
